<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet"  href="css/personalCenter.css" />
		<link rel="stylesheet" href="css/upWindow.css" />
    	<link rel="stylesheet" href="css/base.css"/>
    	<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
		<script type="text/javascript" src="js/cookieUtil.js"></script>
		<script type="text/javascript" src="js/toolUtil.js"></script>
		<script type="text/javascript" src="js/jquery-form.js"></script>
		<script type="text/javascript" src="js/register.js"></script>
    	<script type="text/javascript" src="js/topPublic.js"></script>
	</head>
	<body>
		<script type="text/javascript" src="js/header.js" ></script>
		<div class="midd">
			<div class="loption">
				<img class="user-img" id="userimg" src="img/login.png" />
				<p class="wel">欢迎你 <span id="username"></span></p>
				<p class="option-comm option-checked" id="option-comm">我的评论</p>
				<p class="option-comm" id="option-set">个人设置</p>
			</div>
			<div class="roption">
				<div class="roption-comm" id="roption-comm">
					<p class="roptiontitle">已发表的评论</p>
					<div class="roption-text" id="commtext"></div>
				</div>
				<div class="roption-comm" id="roption-set">
					<p class="roptiontitle">个人资料修改</p>
					<ul class="rchoice">
						<li class="choice-checked" id="headimg">上传头像</li>
						<li id="nickname">修改昵称</li>
						<li id="password">修改密码</li>
					</ul>
					<div class="option-show" id="headimg1" style="display: block;">
						<div class="file-box">
							<span>选择文件</span>
							<form id="form" name="form" method="POST" enctype="multipart/form-data" action="/baby/sys/uploadPic" > 
								<input type="file" name="file"  id="fileUpload1" onchange ="uploadFile(this,1)" accept="image/png, image/jpg"/> 
							</form>
						</div>
						<div class="head-box">
							<div class="head-preview" id = "result"></div>
							<p style="font-size: 14px;color: #676767;text-align: center;width:100%;">只支持jpg、png格式，大小不能超过1M</p>
						</div>
					</div>
					<div class="option-show" id="nickname1">
						<div class="set-box">
							<p>
								<span>设置昵称 :</span>
								<input type="text" id="sname" value=""/>
							</p>
							<span class="save-btn" onclick="upname()">保存修改</span>
						</div>
					</div>
					<div class="option-show" id="password1">
						<div class="set-box">
							<p>
								<span>输入旧密码 :</span>
								<input type="password" id="upPwd" placeholder="请输入密码"/>
							</p>
							<p>
								<span>设置新密码 :</span>
								<input type="password" id="newpwd"  placeholder="请输入新密码"/>
							</p>
							<p>
								<span>确认新密码 :</span>
								<input type="password" id="newpassword" placeholder="请确认新密码"/>
							</p>
							<span class="save-btn" onclick="uppwd()">保存修改</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/footer.js" ></script>
		<script type="text/javascript" src="js/banner.js" ></script>
		<input type="hidden" id="name">
	<script>
	
//		我的评论/个人设置
		$(function(){
			//加载个人信息
			getUser1();

			$("#option-comm").click(function(){
				$(this).addClass("option-checked");
				$("#option-set").removeClass("option-checked");
				$("#roption-comm").show();
				$("#roption-set").hide();
			});
			$("#roption-set").hide();
			$("#option-set").click(function(){
				$(this).addClass("option-checked");
				$("#option-comm").removeClass("option-checked");
				$("#roption-set").show();
				$("#roption-comm").hide();
			});
			getUserComment();
			//跟换头像form
			 $('#form').ajaxForm(function(data){
		           
		            //alert(data);//弹出ajax请求后的回调结果，data回调数据  onclick="sub()"
		            if(data.code =="2000" ){ 
		             alert(data.message); 
		             //setCookie("username",data.data.userName);
		            // window.location.href='eat-list.html'
		            // window.location.reload();   
		           getUser1();
		         }else{  
		              alert(data.message); 
		             console.log(data);  
		         }  
	        });


		})

		function getUser1(){
		$.ajax({
			url: '/baby/sys/getUserInfo', // 跳转到 action  
			data: {},
			type: 'post',
			cache: false,
			dataType: 'json',
			success: function(data){
				if(data.code == "2000"){
					console.log(data);
					$("#username").html(data.data.userName);
					$("#name").val(data.data.userName);
					$('#ou').hide();//未登录的隐藏
					$("#lu").show();//登录的显示
					
					var imgurl='' 
					// alert(data.data.userHeadPic.length);
					if(data.data.userHeadPic.length<54){
						imgurl=	'img/login.png';
					}else{
						imgurl=data.data.userHeadPic;
					}
				
					$("#userimg").attr("src",imgurl);
					$("#ln").attr("src",imgurl);
				}else{
					$('#lu').hide();//登录的隐藏
					$("#ou").show();//未登录的显示
					alert(data.message);
					console.log(data);
				}
			},
			error: function(error){
				// view("异常！");  
			console.log(error);
			}
		});
	}


		function getUserComment(){
		$.ajax({
			url: '/baby/comment/getUserComment', // 跳转到 action  
			data: {},
			type: 'post',
			cache: false,
			dataType: 'json',
			success: function(data){
				if(data.code == "2000"){
					 console.log(data);
					var htmlText=""
					var datalist=data.data.dataList
				
					for (var i = 0;i< datalist.length ;i++) {
						var sid=datalist[i].sid;
						var msg=datalist[i].commentMsg;
						var title=datalist[i].title;
						var time=datalist[i].commentCreateTime;
						htmlText+=	"<div class=\"roption-text\">"
						+	"<p class=\"comm-det word-break\">"+msg+"</p>"
						+	"<p class=\"comm-by\">"
						+	"	<span class=\"user-come\">来自</span>"
						+	"	<span class=\"comm-title\">《"+title+"》</span>"
						+	"	<span class=\"user-time\">"+time+"</span>"
						+	"</p>"
						+	"<span class=\"del\" onclick=\"deleteComment('"+sid+"')\">删除</span>"
						+	"</div>"
					}
					//alert(htmlText);
					$("#commtext").html(htmlText);
				
				}else{
					$("#commtext").html("<span class=\"user-come\">还没有评论····</span>");
					// $('#lu').hide();//登录的隐藏
					// $("#ou").show();//未登录的显示
					// alert(data.message);
					console.log(data);
				}
			},
			error: function(error){
				// view("异常！");  
			console.log(error);
			}
		});
	}
	function deleteComment(sid){
		if(sid===''){
			return;
		}
		$.ajax({
			url: '/baby/comment/deleteComment', // 跳转到 action  
			data: {key:sid},
			type: 'post',
			cache: false,
			dataType: 'json',
			success: function(data){
				console.log(data);
				if(data.code == "2000"){
					alert(data.message);
					window.location.reload();
				}
			},
			error: function(error){
				// view("异常！");  
			console.log(error);
			}
		});
	}

function upname(){
	var sname=$("#sname").val();
	if(sname===''){
		alert("请输入一个名称");
		return;
	}
	$.ajax({
			url: '/baby/sys/updateName', // 跳转到 action  
			data: {username:sname},
			type: 'post',
			cache: false,
			dataType: 'json',
			success: function(data){
				console.log(data);
				if(data.code == "2000"){
					alert(data.message);
					window.location.reload();
				}
			},
			error: function(error){
				// view("异常！");  
			console.log(error);
			}
		});
}


 function uppwd(){
 	var password=$("#upPwd").val();
 	var newpwd=$("#newpwd").val();
 	var newpassword=$("#newpassword").val();
 	
 	if(newpwd!=newpassword){
 		alert("两次密码不一致");
 		return;
 	}
 	$.ajax({
			url: '/baby/sys/updateNewUserPwd', // 跳转到 action  
			data: {password:password,newPwd:newpassword},
			type: 'post',
			cache: false,
			dataType: 'json',
			success: function(data){
				console.log(data);
				if(data.code == "2000"){
					alert(data.message);
					window.location.reload();
				}else if(data.code == 5000){
					alert(data.message)
				}
			},
			error: function(error){
				// view("异常！"); 
			console.log(error);
			}
		});
 }
//		个人资料修改
		window.onload=function (){
	        var oDiv=document.getElementById('roption-set');
	        var aBtn=oDiv.getElementsByTagName('li');
	        var aDiv=oDiv.getElementsByClassName('option-show');
	        for(var i=0;i<aBtn.length;i++){			//遍历div1中的按钮
	        	aBtn[i].index=i;			//给aBth[]添加自定义属性
	        	aBtn[i].onclick=function (){
	        		for(var i=0;i<aBtn.length;i++){	//遍历按钮，将class清除

	        			aBtn[i].className='';
	              		aDiv[i].style.display='none';
	        		}
	        		
	        		this.className='choice-checked';
	        		
	        		aDiv[this.index].style.display='block';


	          	}
	        }
	    }
	    //上传头像form提交
	    function uploadFile(){
	     $("#form").submit(); 
	    }
//		上传头像
		function ProcessFile( e ) {
			var file = document.getElementById('file').files[0];
			if ( file ) {
				var reader = new FileReader();
				reader.onload = function ( event ) { 
					var txt = event.target.result;
					var img = document.createElement("img");
					img.src = txt;
					document.getElementById("result").appendChild( img );
				};
			}
			reader.readAsDataURL( file );
		}
		function contentLoaded() {
			document.getElementById('file').addEventListener( 'change' ,ProcessFile , false );
		}
		window.addEventListener( "DOMContentLoaded" , contentLoaded , false );
	</script>
	</body>
</html>
